<template>
	<view>
		<view class="container m-b6 p-bottom">
			<view class="common-header-xian"></view>
			<custom-ul class="addres-list" v-if="list.length">
				<custom-li v-for="(item,index) in list"  :key="index">
					<view class="address-header b-f m-top18">
						<view class="flow-header-left pl-12">
							<view class="flow-checkout-admin">{{item.name}}
								<text>{{item.phone}}</text>
							</view>
							<view v-if="item.status == 1" class="flow-checkout-address">
								{{item.region.province}} {{item.region.city}} {{item.region.region}} {{item.detail}}
							</view>
							<view v-else class="flow-checkout-address">
								{{item.zhouname}} {{item.shixianname}} {{item.detail}}
							</view>
						</view>
					</view>
					<view class="address-list dis-flex b-f">
						<view class="list address-left">
							<radio-group @change="setDefault" class="radio-group">
								<label class="radio">
									<radio :checked="item.address_id == default_id" color="#ff495e" :value="item.address_id"></radio>
									<text class="cont" v-if="item.address_id == default_id">默认</text>
									<text class="cont" v-else>选择</text>
								</label>
							</radio-group>
						</view>
						<view class="list address-right dis-flex">
							<view v-if="item.status == 1" @tap="editAddress" :data-id="item.address_id">
								<text class="iconfont icon-edit"></text>
								<text class="title">编辑</text>
							</view>
							<view v-else @tap="editAddresshaiwai" :data-id="item.address_id">
								<text class="iconfont icon-edit"></text>
								<text class="title">编辑</text>
							</view>
							<view @tap="removeAddress" :data-id="item.address_id">
								<text class="iconfont icon-lajixiang"></text>
								<text class="title">删除</text>
							</view>
						</view>
					</view>
				</custom-li>
			</custom-ul>
			<view v-else>
				<view class="yoshop-notcont">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，您还没有收货列表</text>
				</view>
			</view>
			<view class="footer-fixed f-32">
				<view @tap="createAddress" class="order-bt" style="width:100%">添加新地址</view>
			</view>
		</view>

		<!-- 快捷导航 -->
		<shortcut></shortcut>
	</view>
</template>

<script>
	import shortcut from '../../components/goods/shortcut.vue'
	export default {
		components: {
			// （组件命名）
			shortcut
		},
		data() {
			return {
				list: {},
				default_id: null,
			}
		},
		onLoad: function(options) {
			// 当前页面参数
			this.options = options;
		},

		onShow: function() {
			// 获取收货地址列表
			this.getAddressList();
		},
		methods: {

			/**
			 * 获取收货地址列表
			 */
			getAddressList: function() {
				let _this = this;
				_this._get('address/lists', {}, function(result) {
					_this.setData(result.data);
				});
			},

			/**
			 * 添加新地址
			 */
			createAddress: function() {
				uni.navigateTo({
					url: './create'
				});
			},

			/**
			 * 编辑地址
			 */
			editAddress: function(e) {
				uni.navigateTo({
					url: "./detail?address_id=" + e.currentTarget.dataset.id
				});
			},

			/**
			 * 编辑海外地址
			 */
			editAddresshaiwai: function(e) {
				uni.navigateTo({
					url: "./detailhaiwai?address_id=" + e.currentTarget.dataset.id
				});
			},
			/**
			 * 移除收货地址
			 */
			removeAddress: function(e) {
				let _this = this;
				let address_id = e.currentTarget.dataset.id;
				uni.showModal({
					title: "提示",
					content: "您确定要移除当前收货地址吗?",
					success: function(o) {
						o.confirm && _this._post_form('address/delete', {
							address_id
						}, function(result) {
							_this.getAddressList();
						});
					}
				});
			},

			/**
			 * 设置为默认地址
			 */
			setDefault: function(e) {
				let _this = this;
				let address_id = e.detail.value;
				_this.setData({
					default_id: parseInt(address_id)
				});
				_this._post_form('address/setDefault', {
					address_id
				}, function(result) {
					_this.options.from === 'flow' && uni.navigateBack();
				});
				return false;

			},
		}
	}
</script>

<style>
	.address-list {
		border-bottom: 2upx solid #f6f6f9;
	}

	.address-list .list {
		padding: 15upx;
	}

	.address-list .list .title {
		font-size: 30upx;
		padding: 0 24upx 0 6upx;
		color: #666;
	}

	.address-list .list .cont {
		font-size: 30upx;
		color: #333;
	}

	.address-list .list navigator {
		display: inline-block;
	}

	.address-list .list image {
		width: 28upx;
		height: 28upx;
	}

	.address-left {
		flex: 6;
	}

	.address-right {
		flex: 3.2;
	}

	.address-right .iconfont {
		color: #777;
		font-size: 30upx;
	}

	.flow-fixed-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #f42424;
		z-index: 4999;
	}

	.flow-fixed-footer .chackout-left {
		font-size: 32upx;
		line-height: 44px;
		color: #777;
	}

	.flow-fixed-footer .chackout-right {
		font-size: 34upx;
	}

	.address-header {
		padding: 28upx 0;
		border-bottom: 1px solid #f6f6f9;
		background-size: 120upx auto;
		font-size: 1.7rem;
	}

	.flow-header-left {
		flex: 14;
		padding: 0upx 20upx;
	}

	.flow-header-right {
		flex: 1;
	}

	.flow-header-right image {
		width: 34upx;
		height: 34upx;
		margin-top: 20upx;
		float: right;
	}

	.address-header .flow-checkout-admin {
		font-size: 34upx;
		color: #444;
	}

	.address-header .flow-checkout-admin text {
		padding: 0 10upx;
	}

	.address-header .flow-checkout-address {
		font-size: 26upx;
		color: #777;
		margin-top: 6upx;
	}

	.radio-group raido {
		color: #f42424;
	}
</style>
